<template>
    <Row>
        <Col :span="24">
            <Row style="margin-bottom: 3px;">
                <Col span="8" style="padding-right: 5px;">
                    <Input v-model="filter.phone" placeholder="输入手机号搜索"></Input>
                </Col>
                <Col span="4">
                    <Button type="primary" @click="handleFilter">搜索</Button>
                </Col>
            </Row>
            <Table
                :columns="columns"
                :data="tableData"
                :loading="isLoading"
                :highlight-row="multiple ? false : true"
                border
                @on-current-change="handleSelect"
                @on-select="handleOnSelect"
                @on-select-cancel="handleOnSelectCancel"
                @on-select-all="handleOnSelectAll"
                @on-select-all-cancel="handleOnSelectAllCancel"
            ></Table>
            <div style="margin-top: 10px; text-align: right;">
                <Page
                    :current="page.current"
                    :page-size="page.size"
                    :total="page.total"
                    show-total
                    show-elevator
                    show-sizer
                    @on-change="handleChangePage"
                    @on-page-size-change="handleChangePageSize"
                />
            </div>
        </Col>
    </Row>
</template>

<script>
import TableRows from '@/components/utils/table-rows.vue';
export default {
    name: 'goodsSelect',
    props: {
        // 值
        value: {
            type: Array,
            default: function() {
                return [];
            }
        },
        // 选择模式，true为多选，false为单选
        multiple: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            isLoading: false,
            filter: {
                phone: '',
                catid: null
            },
            page: {
                current: 1,
                size: 10,
                total: 0
            },
            checkeds: [],
            tableData: [],
            columns: [
                {
                    title: '用户UID',
                    width:100,
                    key: 'id'
                },
                {
                    title: '用户信息',
                    render: (h, params) => {
                        return h(TableRows, {
                            props: {
                                src: params.row.avatar || '/static/images/default_avatar.png'
                            }
                        }, [
                            h('p',`手机号：${params.row.phone}`)
                        ])
                    }
                },
                {
                    title: '注册时间',
                    key: 'created_at'
                }
            ]
        }
    },
    computed: {

    },
    mounted() {
        if(this.multiple) {
            this.columns.unshift({
                type: 'selection',
                width: 54,
                align: 'center'
            })
        }else{
            this.columns.unshift({
                title: '单选',
                width: 54,
                align: 'center',
                render: (h, params) => {
                    let id = this.checkeds[0] ? this.checkeds[0]['id'] : '';
                    return h('div', [
                        h('Icon', {
                            props: {
                                type: params.row.id === id ? 'ios-checkmark-circle' : 'ios-radio-button-off',
                                size: 20,
                                color: params.row.id === id ? '#2d8cf0' : '#dcdee2',
                            }
                        })
                    ])
                }
            })
        }
        this.handleLoadData();
    },
    /* watch: {
        value: {
            deep: true,
            handler() {
                this.init();
            }
        }
    }, */
    methods: {
        init() {
            let ids = this.value.map(item => item.id);
            if(this.multiple) {
                this.tableData = this.tableData.map(item => {
                    if(ids.indexOf(item.id) !== -1) {
                        item._disabled = true;
                    }else{
                        item._disabled = false;
                    }
                    return item;
                });
            }else{
                this.checkeds = this.value;
                this.tableData = this.tableData.map(item => {
                    if(ids.indexOf(item.id) !== -1) {
                        item._highlight = true;
                    }else{
                        item._highlight = false;
                    }
                    return item;
                });
            }
        },
        handleFilter() {
            this.page.current = 1;
            this.handleLoadData();
        },
        handleLoadData() {
            const { filter, page } = this;
            let params = {
                phone: filter.phone,
                page: page.current,
                pageSize: page.size
            }
            
            this.isLoading = true;
            this.$ajax.get('/user/index', {params: params}).then(res => {
                let data = res.items || [];
                let ids = this.checkeds.map(item => item.id);
                // 多选
                if(this.multiple) {
                    let disableds = this.value.map(item => item.id);
                    // 设置勾选
                    this.tableData = data.map(item => {
                        if(disableds.indexOf(item.id) !== -1) {
                            item._disabled = true;
                        }else{
                            if(ids.indexOf(item.id) !== -1) {
                                item._checked = true;
                            }else{
                                item._checked = false;
                            }
                        }
                        return item;
                    });
                }else{
                    // 单选
                    this.tableData = data.map(item => {
                        if(ids.indexOf(item.id) !== -1) {
                            item._highlight = true;
                        }else{
                            item._highlight = false;
                        }
                        return item;
                    });
                }
                this.page.total = res.pageInfo.total;
                this.isLoading = false;
            }).catch(err => {
                this.isLoading = false;
            })
        },
        // 切换页码
        handleChangePage(page) {
            this.page.current = page;
            this.handleLoadData();
        },
        // 切换每页条数
        handleChangePageSize(size) {
            this.page.current = 1;
            this.page.size = size;
            this.handleLoadData();
        },
        // 单选
        handleSelect(row) {
            this.checkeds = [row];
        },
        // 多选
        handleOnSelect(selection, row) {
            this.checkeds.push(row);
        },
        handleOnSelectCancel(selection, row) {
            this.checkeds = this.checkeds.filter(item => item.id !== row.id);
        },
        handleOnSelectAll(selection) {
            let ids = this.checkeds.map(item => item.id);
            let res = this.tableData.filter(item => ids.indexOf(item.id) === -1);
            this.checkeds = [...this.checkeds, ...res];
        },
        handleOnSelectAllCancel() {
            let ids = this.tableData.map(item => item.id);
            this.checkeds = this.checkeds.filter(item => ids.indexOf(item.id) === -1);
        },
        getCheckeds() {
            return this.checkeds.filter(item => !item._disabled);
        },
        clear() {
            this.checkeds = [];
            this.tableData = this.tableData.map(item => {
                if(item._checked) item._checked = false;
                if(item._highlight) item._highlight = false;
                return item;
            })
        },
    }
}
</script>